<!-- 提现明细 -->
<template>
	<view class="u-page fullpage">
		<view class="top-warp">
			<zx-nav title="提现明细"></zx-nav>
			<app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs>
		</view>
		<mescroll-body :top="topH" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view v-for="(item, index) in scoreList" :key="index" class="account-item">
				<view class="flex justify-between align-center">
					<div class="flex align-center">
						<image v-if="item.tx_type == 1" style="width: 60rpx; height: 60rpx" src="/static/tenPay.png" mode="widthFix"></image>
						<image v-else style="width: 60rpx" src="/static/wallet.png" mode="widthFix"></image>
						<text class="u-m-l-10">{{ item.dz_money }}</text>
					</div>
					<view class="price">{{ filerState(item.type) }}</view>
				</view>
				<view class="flex justify-between align-end">
					<text>{{ item.created_at }}</text>
					<view v-if="item.type == 3 && item.tx_type == 1">
						<u-button type="primary" size="small" @tap="confirm(item)">确认收款</u-button>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState, mapMutations } from 'vuex';
import AppTabs from '@/components/app-tabs.vue';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			scoreList: [],
			tabIndex: 0,
			tabs: [
				{
					name: '全部',
					value: 0
				},
				{
					name: '待收款',
					value: 3
				},
				{
					name: '待审核',
					value: 2
				},
				{
					name: '已打款',
					value: 1
				}
			]
		};
	},
	components: { AppTabs },
	computed: {
		...mapState(['CustomBar']),
		topH() {
			return this.CustomBar + uni.upx2px(100) + uni.upx2px(20) + 'px';
		}
	},
	methods: {
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		upCallback(mescroll) {
			this.getscore();
		},
		//获取余额明细列表
		getscore() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize
			};
			if (this.tabIndex > 0) {
				param.type = this.tabs[this.tabIndex].value;
			}
			let $me = this;
			this.$postAction(this.$api.getWithdrawalList, param).then(da => {
				if ($me.mescroll.num == 1) $me.scoreList = []; //如果是第一页需手动制空列表
				if (da.data && da.data.length > 0) {
					let curPageData = da.data;
					$me.mescroll.endBySize(curPageData.length, da.count);
					$me.scoreList = $me.scoreList.concat(curPageData); //追加新数据
				} else {
					$me.mescroll.endSuccess(0, false);
				}
			});
		},
		tabChange(e) {
			this.mescroll.resetUpScroll();
		},
		filerState(state) {
			let info = this.tabs.find(item => item.value == state);
			return info ? info.name : '';
		},
		confirm(info) {
			let { mchId, appId, openid } = info;
			let that = this;
			console.log('确认收款', mchId, appId, openid);
			wx.requestMerchantTransfer({
				mchId,
				package: info.package,
				appId,
				openid,
				success(res) {
					that.updateWithdrawal(info.id);
				},
				fail(res) {
					console.log('发送错误了', res);
				}
			});
		},
		updateWithdrawal(id) {
			console.log('付款成功');
			this.downCallback();
			this.$postAction(this.$api.updateWithdrawal + id);
		}
	}
};
</script>
<style>
page {
	background: #fff;
}
</style>
<style lang="scss">
.account-item {
	color: #1c1c1e;
	padding: 24upx 28upx;
	color: #969696;
	border-bottom: 1px solid #f0f0f0;
	font-size: 24upx;
	& > view:first-child {
		font-size: 28upx;
		color: #1c1c1e;
	}
}
.top-warp {
	z-index: 9990;
	position: fixed;
	top: --window-top;
	/* css变量 */
	left: 0;
	width: 100%;
	background-color: white;
	border-bottom: 1px solid #f0f0f0;
}
</style>
